body {
margin: 0;
padding: 0;
min-height: 100vh;
background-color: #222224;
font-family: "Open Sans", Verdana, Geneva, Tahoma, sans-serif;
}
body,
nav,
.menu__list {
display: flex;
justify-content: center;
align-items: center;
}
nav {
position: relative;
background-color: #fff;
padding: 20px;
transition: 0.5s;
border-radius: 50px;
overflow: hidden;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
.menu__list {
margin: 0;
padding: 0;
width: 0;
overflow: hidden;
transition: 0.5s;
}
nav input:checked~.menu__list {
width: 450px;
}
.menu__list li {
list-style: none;
margin: 0 10px;
}
.menu__list li a {
text-decoration: none;
color: #222224;
text-transform: uppercase;
font-weight: 600;
transition: 0.5s;
}
.menu__list li a:hover {
color: #009688;
}
nav input {
width: 40px;
height: 40px;
cursor: pointer;
opacity: 0;
}
nav span {
position: absolute;
left: 30px;
width: 30px;
height: 4px;
border-radius: 50px;
background-color: #222224;
pointer-events: none;
transition: 0.5s;
}
nav input:checked~span {
background-color: #ff0056;
}
nav span:nth-child(2) {
transform: translateY(-8px);
}
nav input:checked~span:nth-child(2) {
transform: translateY(0) rotate(-45deg);
}
nav span:nth-child(3) {
transform: translateY(8px);
}
nav input:checked~span:nth-child(3) {
transform: translateY(0) rotate(45deg);
}